<template>
	<!-- 热力图组件 -->
	<div>
		<el-button type="success" @click.stop="createHeatMap">
			生成事件热力图
		</el-button>
		<el-dialog
			title="热力图参数设置"
			v-el-drag-dialog
			:visible.sync="dialogVisible"
			width="300px"
			:before-close="handleClose"
			:close-on-click-modal="false"
			:modal="false"
		>
			<div class="block">
				<span class="demonstration">热点半径(radius size)</span>
				<el-slider v-model="radiusSize"></el-slider>
			</div>
			<div class="block">
				<span class="demonstration">模糊尺寸(blur size)</span>
				<el-slider v-model="blurSize"></el-slider>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import elDragDialog from '../../../directive/el-dragDialog'; //导入自定义弹窗拖拽
// 定义全局热力图图层，方便方法调用
var sourceHeatmap = new ol.source.Vector({ wrapX: false });
var layerHeatmap;
export default {
	name: 'EventHeatMap',
	directives: {
		// 自定义拖拽弹窗配置
		elDragDialog,
	},

	mounted() {
		this.searchEvent(); //获取所有事件
	},
	computed: {
		...mapState(['map', 'docLayer']),
	},
	data() {
		return {
			dialogVisible: false, //控制参数弹窗显示
			radiusSize: 17, //热点半径
			blurSize: 18, //模糊半径
			featuresEvent: [], //查询到的事件
		};
	},
	watch: {
		// 此处踩坑，这里千万不能用箭头函数，否则会凉凉，下面是解决方案
		// http://www.45fan.com/article.php?aid=1CWPbf8S0z22LPGw
		radiusSize: function (n, o) {
			// console.log('旧' + o);
			// console.log('新' + n);
			this.toUpDateHeatMap(); //更新热力图
		},
		blurSize: function (n, o) {
			this.toUpDateHeatMap(); //更新热力图
		},
		dialogVisible: function (n, o) {
			this.map.removeLayer(layerHeatmap); //移除图层
		},
		dialogVisible: function (n, o) {
			this.$store.commit('heatMapState', this.dialogVisible); //向vuex添加docLayer数据
		},
	},

	methods: {
		createHeatMap() {
			console.log('初始热力图');
			this.dialogVisible = true; //显示弹窗
			this.toUpDateHeatMap(); //调用生成热力图函数
		},
		toUpDateHeatMap() {
			// 动态更新热力图
			sourceHeatmap.clear(); //清除源
			this.map.removeLayer(layerHeatmap); //每次更新前都要移除原来图层
			//创建热力图层
			sourceHeatmap.addFeatures(this.featuresEvent);
			layerHeatmap = new ol.layer.Heatmap({
				source: sourceHeatmap,
				radius: this.radiusSize,
				blur: this.blurSize,
				weight: 'weight', //默认热力图层权值字段（0-1）
			});
			this.map.addLayer(layerHeatmap);
		},
		searchEvent() {
			//1、初始化查询结构对象，设置查询结构包含几何信息
			var queryStruct = new Zondy.Service.QueryFeatureStruct();
			queryStruct.IncludeGeometry = true;
			queryStruct.IncludeWebGraphic = true;
			//2、创建一个用于查询的点形状
			var pointObj = new Zondy.Object.Point2D(114, 30);
			//设置点容差半径
			pointObj.nearDis = 1;
			//指定查询规则
			var rule = new Zondy.Service.QueryFeatureRule({
				//是否将要素的可见性计算在内
				EnableDisplayCondition: false,
				//是否完全包含
				MustInside: false,
				//是否仅比较要素的外包矩形
				CompareRectOnly: false,
				//是否相交
				Intersect: true,
			});
			//3、实例化查询参数对象
			var queryParam = new Zondy.Service.QueryParameter({
				geometry: pointObj,
				resultFormat: 'json',
				struct: queryStruct,
				rule: rule,
			});
			//设置查询分页号
			queryParam.pageIndex = 0;
			//设置查询要素数目
			queryParam.recordNumber = 1000;
			//4、实例化地图文档查询服务对象
			var queryService = new Zondy.Service.QueryDocFeature(
				queryParam,
				this.docLayer.name,
				2, //事件在第2图层
				{
					ip: 'localhost',
					port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089
				}
			);
			//执行查询操作，querySuccess为查询回调函数
			queryService.query(this.querySuccess);
		},

		querySuccess(result) {
			// console.log('查询到了');
			//初始化Zondy.Format.PolygonJSON类
			var format = new Zondy.Format.PolygonJSON();
			//将MapGIS要素JSON反序列化为ol.Feature类型数组
			var features = format.read(result);
			this.featuresEvent = features;
		},
		handleClose(done) {
			done(); //关闭弹窗
			this.map.removeLayer(layerHeatmap); //移除图层
		},
	},
};
</script>
<style scoped></style>
